<template>
	<view class="content">
		<topCom>{{title}}</topCom>
		<view class="trade">
			<view class="title">交易记录</view>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index+1">
					<view class="name">{{item.name}}</view>
					<view class="time">{{item.time}}</view>
					<view :class="'num ' + (item.num>=0?'correct':'negative')">{{item.num}}</view>
					<view class="tips">{{ }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import topCom from '../topCom/index.vue'
	import { ref } from 'vue'
	const title = ref('用户账户')
	const list = ref([{
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}, {
		name: '出售KOI',
		time: '2023年10月10日 21：19：28',
		num: '-10'
	}])
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		padding: 10px;

		.trade {
			width: 686px;
			max-height: 84vh;
			margin: 0 auto;
			padding: 40px;
			background: rgba(255, 255, 255, 0.1);
			overflow-y: auto;
			border-radius: 32px;
			color: #ffffff;
			box-sizing: border-box;
			font-size: 36px;
			margin-top: 40px;

			.title {
				font-size: 36px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 50px;
				letter-spacing: 1px;
			}

			.list {
				padding-top: 12px;
				overflow-y: auto;
				.item {
					display: flex;
					justify-content: space-between;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					height: 80px;
					flex-wrap: wrap;
					align-items: center;
					flex-direction: row;
					align-content: center;

					.name {
						font-size: 26px;
					}

					.time {
						color: rgba(127, 127, 129, 1);
						font-size: 24px;
					}

					.num {
						font-size: 26px;

						&.correct {
							color: rgba(247, 181, 0, 1);
						}

						&.negative {
							color: rgba(0, 208, 185, 1);
						}
					}

					.tips {
						width: 100%;
						font-size: 24px;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: rgba(119, 120, 122, 1);
						line-height: 33px;
					}
				}
			}
		}
	}
</style>